<!DOCTYPE html>
<html>
<head>
    <title>部门管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/plugin/zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="/static/plugin/zTree_v3/css/demo.css">
    <script src="/static/plugin/zTree_v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="/static/layui/layui.js"></script>
    <script src="/static/plugin/ztree/js/jquery.ztree.core.js"></script>
    <script src="/static/plugin/ztree/js/jquery.ztree.excheck.js"></script>
    <script src="/static/plugin/ztree/js/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" src="/static/js/base.js"></script>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a>
          <cite>部门管理</cite>
        </a>
      </span>
</div>
<div class="x-body">

    <div class="layui-row" style="margin-bottom: 18px">
        <div class="layui-form">
            <div class="layui-input-inline">

                <div class="layui-input-inline" style="width: 150px">
                    <input class="layui-input" id="keyword01" placeholder="请输入部门名称" style="width: 150px">
                </div>
                <button class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
            </div>
        </div>
    </div>

    <xblock>
        <button class="layui-btn layui-btn-warm" id="add"><i class="layui-icon layui-icon-add-circle-fine"></i>新增</button>
        <!--<button class="layui-btn layui-btn-danger" id="del"><i class="layui-icon layui-icon-delete"></i>批量删除</button>-->
    </xblock>
    <table class="layui-hide" id="tableList" lay-filter="tableList"></table>
</div>
<div id="addDivID" style="display:none">
    <form class="layui-form" id="addFormID" style="margin-top:20px">
        <div style="width:100%;height:200px;overflow: auto;">
            <!--<div class="layui-form-item">-->
                <!--<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">-->
                    <!--<legend style="font-size:16px;">部门信息</legend>-->
                <!--</fieldset>-->
            <!--</div>-->
            <div style="margin-top: 10px"></div>
            <div class="layui-form-item">
                <label for="roleName" class="layui-form-label">
                    <span class="x-red">*</span>部门名称
                </label>
                <div class="layui-input-inline">
                    <input type="text"   name="deptName"  lay-verify="deptName"
                           autocomplete="off" class="layui-input">
                </div>
                <div  class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span><span id="ums">部门名称必填</span>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="remark" class="layui-form-label">
                        <span class="x-red">*</span>部门描述
                    </label>
                    <div class="layui-input-inline">
                        <input type="text"  name="remark" lay-verify="remark"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="subBtn" lay-submit lay-filter="addForm">添加</button>
                <button  class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>

    </form>
</div>


<div id="updateDivID" style="display:none">
    <form class="layui-form" id="updateFormID" style="margin-top:20px">
        <div style="width:100%">
            <!--<div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
                    <legend style="font-size:16px;">部门信息</legend>
                </fieldset>
            </div>-->
            <div style="margin-top: 10px"></div>
            <div class="layui-form-item">
                <label for="roleName" class="layui-form-label">
                    <span class="x-red">*</span>部门名称
                </label>
                <div class="layui-input-inline">
                    <input type="text"  id="roleName" name="deptName"  lay-verify="deptName"
                           autocomplete="off" class="layui-input">
                </div>
                <div id="ms" class="layui-form-mid layui-word-aux">
                    <!--<span class="x-red">*</span><span >部门名称必填</span>-->
                    <input type="hidden" name="deptId">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="remark" class="layui-form-label">
                        <span class="x-red">*</span>部门描述
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="remark" name="remark" lay-verify="remark"  autocomplete="off" class="layui-input">
                        <input type="hidden" name="roleId">
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="updateSubBtn" lay-submit lay-filter="updateForm">更新</button>
                <button  class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>

    </form>
</div>

<script type="text/html" id="toolBar">
    <!--<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>

<script>
    var treeObj;
    var treeObj2;

    function createTime(v){
        var date = new Date(v);
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = date.getDate();
        d = d<10?("0"+d):d;
        var h = date.getHours();
        h = h<10?("0"+h):h;
        var M = date.getMinutes();
        M = M<10?("0"+M):M;
        var str = y+"-"+m+"-"+d+" "+h+":"+M;
        return str;
    }

    $(document).ready(function () {
        var time = new Date();
        var day = ("0" + time.getDate()).slice(-2);
        var month = ("0" + (time.getMonth() + 1)).slice(-2);
        var today = time.getFullYear() + "-" + (month);
        $('#dateTime').val(today);
    })

    layui.use(['table','layer','upload','form','laydate'], function(){
        var table = layui.table;
        var form=layui.form;
        var laydate = layui.laydate;
        laydate.render({
            elem: '#date1',
            value:new Date()
        });
        laydate.render({
            elem: '#date2'
        });

        laydate.render({
            elem: '#date3',
            type: 'month',
            value: new Date(),
            done:function(value, date, endDate) {
                $('#dateTime').val(value);
            }
        });

        var $ = layui.jquery, active = {
            reload:function () {
                table.reload('contentTable',{
                    method:'get'
                    ,where:{
                        'deptName':$('#keyword01').val()
                    }
                    ,page: {
                        curr: 1//重新从第 1 页开始
                    }
                });
            }
        }

        table.render({
            elem: '#tableList'
            ,id:'contentTable'
            ,url: '/dept/showDeptPage'
            ,toolbar: '#toolbar'
            ,where:{

            }
            , cols: [
                [ {field:'uid', title:'序号', width: '5%', type:'numbers',align:'center'}
                    , {field: 'deptName', title: '部门名称', width: '20%', sort: true}
                    , {field: 'remark', title: '部门描述', width: '20%', sort: true}
                    , {field: 'createDate', title: '创建时间', width: '20%',templet:function (row) {
                        return createTime(row.createDate);
                    }}
                    , {field: 'remark', title: '操作', width: '27%', toolbar: "#toolBar"}
                ]
            ]
            , page: true
            ,totalRow: true
            ,done : function(res, curr, count){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })
            }
        });

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('.layui-col-md12 .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.select .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });


        //监听工具条
        table.on('tool(tableList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                detail('编辑角色', 'updateDept?id=' + data.deptId, 600, 350);
            } else if (obj.event === 'del') {
                layer.confirm('确定删除部门？[<label style="color: #00AA91;">' + data.deptName + '</label>]?', {
                    btn: ['确定','取消'] //按钮
                }, function(index){
                    del(data.deptId)
                })

            } else if (obj.event === 'edit') {
                update('编辑部门', 'updateDept?id=' + data.deptId, 700, 450);
            }
        });


         /**
          * 删除
          *
          * */
        function del(deptId) {
             $.ajax({
                 type: 'get',
                 url: '/dept/deleteDept',
                 data:{'deptId':deptId},
                 success: function (data) {
                     if (data) {
                         layer.msg('删除成功',{icon: 1})
                     }else {
                         layer.msg("请联系管理员！", {icon: 2});
                     }
                     setTimeout(function(){
                         window.location.reload()
                     },1000);
                 }
             })
        }

        /**
         * 修改
         *
         * */
        function update(title, url, w, h) {
            if (title == null || title == '') {
                title = false;
            }
            if (url == null || url == '') {
                url = "/error/404";
            }
            if (w == null || w == '') {
                w = ($(window).width() * 0.9);
            }
            if (h == null || h == '') {
                h = ($(window).height() - 50);
            }
            layer.open({
                id: 'user-update',
                type: 1,
                area: [w + 'px', h + 'px'],
                maxmin: true,
                anim: 1,
                shade: 0.4,
                title: title,
                content: $('#updateDivID'),
                success: function(){
                    form.render();
                    $.ajax({
                        type:'get',
                        url:url,
                        success:function (data) {
                            var deptData = JSON.parse(data);
                            $('input[name="deptName"]').val(deptData.deptName);
                            $('input[name="remark"]').val(deptData.remark);
                            $('input[name="deptId"]').val(deptData.deptId);

                        }
                    })
                }
            });
        }

        function detail(title, url, w, h) {
            var number = 1;
            if (title == null || title == '') {
                title = false;
            }
            ;
            if (url == null || url == '') {
                url = "/error/404";
            }
            ;
            if (w == null || w == '') {
                w = ($(window).width() * 0.9);
            }
            ;
            if (h == null || h == '') {
                h = ($(window).height() - 50);
            }
            ;
            layer.open({
                id: 'user-detail',
                type: 1,
                area: [w + 'px', h + 'px'],
                maxmin: true,
                shade: 0.4,
                anim: 1,
                title: title,
                //content: url + '&detail=true',
                // btn:['关闭']
                content: $('#updateDivID'),
                success: function(){
                    form.render();
                    $.ajax({
                        type:'get',
                        url:url,
                        success:function (data) {
                            var roleData = JSON.parse(data);
                            $('input[name="deptName"]').val(deptData.deptName);
                            $('input[name="remark"]').val(deptData.remark);
                            $('input[name="deptId"]').val(deptData.deptId);
                            $.ajax({
                                type:'get',
                                data:{'roleId':roleData.roleId},
                                url:'/menu/queryRoleMenuByRoleList',
                                success:function (data) {
                                    var roleMenu = JSON.parse(data);
                                    updateZtreeInit();
                                    for(var j=0;j<roleMenu.length;j++){
                                        //var treeObj3 = $.fn.zTree.getZTreeObj("updateTreeDemo");
                                        console.log(roleMenu[j])

                                        var node = treeObj2.getNodeByParam("permissionId",roleMenu[j]);
                                        var parent = node.getParentNode();
                                        treeObj2.expandNode(parent,true,true);
                                        treeObj2.checkNode(node , true,true);
                                    }
                                }
                            })
                        }
                    })
                }
            });
        }

        $("#add").click(function(){
            $("#brand1").hide()
            $("#brand2").hide()

            layer.open({
                type: 1 ,				//Page层类型
                area: ['540px', '320px'] 	//宽  高
                ,title: '新增'
                ,shade: 0.6 			//遮罩透明度
                ,maxmin: true 			//允许全屏最小化
                ,anim: 1 				//0-6的动画形式，-1不开启
                ,content: $('#addDivID')
                ,success: function(){
                    $('input[name="roleName"]').val("");
                    $('input[name="remark"]').val("");
                    form.render();
                }
            });
        });

        //批量删除
        $("#del").click(function(){
            var rowData = table.checkStatus('contentTable');
            var data = rowData.data;
            var idArr = new Array();
            if(data.length == 0){

                layer.alert("请至少选择一条记录！",{icon :5})

            } else {
                for(var i=0;i < data.length;i++){
                    idArr[i] = data[i].wareHouseId;
                }
                $.ajax({
                    type:'post',
                    url:'/wareHouse/delete',
                    data:{"idArr" : idArr},
                    success:function(data){
                        layer.confirm('确定删除吗？', function(){
                            if(data > 0){
                                layer.msg('删除成功',{icon:6})
                                setTimeout(function(){
                                    location.reload();
                                },1000);
                                setTimeout(function(){
                                    window.location.reload();
                                },2000);
                            }else{
                                layer.msg('删除失败',{icon:5})
                                location.reload();
                            }
                        });
                    }
                });
            }
        });

        form.verify({
            deptName:function (value, item) {
                if(value.trim() == ''){
                    return '部门名称不能为空';
                }
            },
            remark:function (value, item) {
                if(value.trim() == ''){
                    return '备注不能为空';
                }
            },

        })

        /**  data:{itemName:"12",startDate:'2019-09-20'},
         * 通用表单提交(AJAX方式),totalMoney:100,startDate:'2019-09-20',dueDate:'2019-09-20'
         */
        form.on('submit(addForm)', function () {
            $("#subBtn").attr("disabled",true);
                $.ajax({
                    type:'post',
                    url:'/dept/addDept',
                    data:$('#addFormID').serialize(),
                    cache:false,
                }).done(
                    function(res) {
                        if (res) {
                            layer.msg('新增成功',{icon:6})
                            setTimeout(function(){
                                location.reload();
                            },1000);
                        }
                    }
                ).fail(
                    function() {
                    layer.msg('新增失败',{icon:5})
                    setTimeout(function(){
                        location.reload();
                    },1000);
                }
            )
            return false;
        })

        form.on('submit(updateForm)', function () {
            $("#subBtn").attr("disabled",true);
            $.ajax({
                type:'post',
                url:'/dept/addDept',
                data:$('#updateFormID').serialize(),
                cache:false,
            }).done(
                function(res) {
                    if (res > 0) {
                        layer.msg('更新成功',{icon:6})
                        setTimeout(function(){
                            location.reload();
                        },1000);
                    }
                }
            ).fail(
                function() {
                    layer.msg('新增失败',{icon:5})
                    setTimeout(function(){
                        location.reload();
                    },1000);
                }
            )
            return false;
        })



    });
</script>
</body>

</html>
